<template>
	<view class="main">
		<view class="box">
			<view class="item" v-for="(item,i) in list" :key="i">
				<image src="../../static/images/mang1.png" mode=""></image>
				<view class="item_but" @click="openshow(item.id)">
					打开空投
				</view>
			</view>
		</view>

		<Empty text="暂无空投" v-if="list.length<1"></Empty>
		<!-- <u-modal :show="show" :title="title"  class="showair" style="background:red;"></u-modal> -->
		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="showair">
				<image src="../../static/images/mang.png" mode="" class="showimg"></image>
				<view class="show_but" @click="openmang()">
					打开空投
				</view>
			</view>
			<view class="show_close" @click="show=false">
				<image src="../../static/images/comimg/close.png"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Empty from "@/components/Empty.vue"
	export default {
		components: {
			Empty
		},
		data() {
			return {
				id: 0,
				show: false,
				title: '',
				page: 1,
				size: 10,
				list: [],
				total: 0,
				loading: false,
				airinfo: {},
			}
		},
		computed: {},
		onReady() {},
		onShow() {

		},
		onLoad() {
			this.getList();
		},
		methods: {
			openshow(id) {
				this.id = id;
				this.show = true;
			},
			openmang() {
				this.loading = true
				this.$http({
					url: this.$api.openair,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.id
					}
				}).then((res) => {
					if (res.code == 200) {
						// console.log('[拆开空投详情]',res)
						this.loading = false;
						this.show = false;
						this.getList();
						this.$u.toast('将在我的藏品中看到空投拆开后的藏品')
					}

				})
			},
			showair() {

			},
			onPullDownRefresh() {
				this.page = 1
				this.getList()
			},
			onReachBottom() {
				console.log('[触底]')
				this.getList()
			},
			//空投详情
			async getList() {
				let data = await this.$http({
					url: this.$api.airlist,
					method: 'GET',
					hideLoading: true,
					needToken: true,
				})
				this.loading = true
				console.log('[空投列表]', data)
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = [];
						this.list = data.data
					}
					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data)
						this.page += 1
					}
				}
			}


		},

	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #FFFFFF;

		/deep/.u-popup__content[data-v-52d4ddd1] {
			background-color: transparent !important;
		}

		.showair {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			// border:1px solid red;
			.showimg {
				margin-left: -40rpx;
			}

			.show_but {
				width: 466rpx;
				height: 97rpx;
				border: 2px solid #FFD7BA;
				background: #F2E0BC;
				color: #4E422C;
				font-weight: 600;
				// background: linear-gradient(90deg, #F7D39D 0%, #FCC362 100%);
				border-radius: 14rpx;
				text-align: center;
				line-height: 97rpx;
				font-size: 36rpx;
				color: #63452f;
			}

		}

		.show_close {
			width: 64rpx;
			height: 65rpx;
			margin: 0 auto;
			margin-top: 46rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.box {
			// min-height:100vh;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			align-items: left;

			.item {
				width: 48%;
				height: 435rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 2rpx 8rpx 6rpx rgba(230, 230, 230, 0.5);
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				image {
					// background-color: red;
					width: 245rpx;
					height: 266rpx;
				}

				.item_but {
					width: 312rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: #F2E0BC;
					border-radius: 10rpx;
					text-align: center;
					margin-top: 45rpx;
					color: #4E422C;
					font-weight: 600;
					font-size: 30rpx;


				}
			}

			.item:nth-child(even) {
				margin-left: 27rpx;
			}
		}
	}
</style>
